<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="icon" href="./img/wy.ico" />
		<link rel="shortcut icon" href="./img/wy.ico" />
		<link rel="bookmark" type="image/x-icon" href="./img/wy.ico" />
		<title>答题卡</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/sheet.css" />
		<link rel="stylesheet" type="text/css" href="css/answerCardPublic.css" />
		<link rel="stylesheet" type="text/css" href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<style type="text/css">

		</style>
	</head>

	<body>
		<div class="main">
			<!--标题信息-->
			<div class="row top">
				<div class="col-md-9  col-xs-9 ">
					<h2>
			</h2>

				</div>
				<div class="col-md-2 col-xs-2 userInfo">
					<span>
				<img src="img/14.png"/>
					用户名称
				</span></div>
				<div class="col-md-1 col-xs-1 exit">
					<span>
				<img src="img/15.png" alt="" />
				退出
			</span></div>
			</div>
			<!--内容-->
			<div class="content">
				<div class="tab">
					<ul>
						<li class="create">
							<img src="img/1.png" />
							<span>
								新建答题卡
							</span>
						</li>
						<li>
							<img src="img/2.png" />
							<span>
								选择模板
							</span>
						</li>
						<li>
							<img src="img/3.png" />
							<span>
								保存模板
							</span>
						</li>
						<li>
							<img src="img/5.png" />
							<span>
								自动保存
							</span>
						</li>
						<li>
							<img src="img/16.png" />
							<span>
								导出答题卡
							</span>
						</li>
					</ul>
				</div>
				<!--题型栏-->
				<div class="leftbar">
					<p>试题组件</p>
					<ul>
						<li>
							<button class="choiceQ">
								选择题
							</button>
						</li>
						<li>
							<button class="judgeQ">
								判断题
							</button>
						</li>
						<li>
							<button class="fillQ">
								填空题
							</button>
						</li>
						<li>
							<button class="shortQ">
								简答题
							</button>
						</li>
						<li>
							<button class="blankStyle">
								空白样式
							</button>
						</li>
						<li>
							<button class="articleEn">
								英语作文
							</button>
						</li>
						<li>
							<button class="articleZh">
								语文作文
							</button>
						</li>
					</ul>
				</div>
				<!--分页栏-->
				<div class="pagebar">
					<ul>
						<!--<li class="pageAct">第1页</li>
						<li>第2页</li>
						<li>第3页</li>-->
					</ul>
				</div>
				<!--答题卡制作栏-->
				<div class="answerSheet">
					<div class="a4Sheet">
						<div class="localMark localMark1">

						</div>
						<div class="localMark localMark2">

						</div>
						<div class="localMark localMark3">

						</div>
						<div class="localMark localMark4">

						</div>
						<div class="a4SheetContent">
							<!--title-->
							<div class="sheetTitle">
								<p class="sheethead" >
									2018-2019学年度第一学期期中考试
								</p>
								<p class="subhead" >
									语文答题卡
								</p>
							</div>
							<!--StuInfo-->
							<div class="stuInfo">
								<span class="schooleInfo">
								学校
							</span>
								<span style="width: 40mm;border-bottom: 1pt solid red;">
									
							</span>
								<span class="inputInfo">
								姓名
							</span>
								<span style="width: 30mm;border-bottom: 1pt solid red;">
									
							</span>
								<span class="inputInfo">
								考场
							</span>
								<span style="width: 30mm;border-bottom: 1pt solid red;">
								
							</span>
								<span class="inputInfo">
								座号
							</span>
								<span style="width: 30mm;border-bottom: 1pt solid red;">
								
							</span>
							</div>
							<!--考生准考证号-->
							<div>
								<div class="warningInfo">
									<div class="stuId">
										<p class="stuIdTitle">准考证号</p>
										<div class="stuIdBox">
											<!--<ul>
												<li>&nbsp;</li>
												<li>0</li>
												<li>1</li>
												<li>2</li>
												<li>3</li>
												<li>4</li>
												<li>5</li>
												<li>6</li>
												<li>7</li>
												<li>8</li>
												<li>9</li>
											</ul>-->
										</div>
									</div>
									<!--缺考标记-->
									<div class="lostSign">
										<p>
											缺考标记 &nbsp;[&nbsp;&nbsp;&nbsp; ]
										</p>
										<p>此栏考试禁止填写，缺考考生由监考员贴条形码，并用2B铅笔填涂缺考标记</p>
									</div>

									<!--注意事项-->
									<div class="warningText">
										<p>注意事项：</p>
										<p>
											1.答题前，考生先将本人学校、姓名、准考证号、考场和座号写在相应位置。
										</p>
										<p>
											2.答题时，必须使用0.5毫米的黑色墨水签字笔书写；作图时，可用2B铅笔，笔迹要清晰；选做题填涂时，必须用2B铅笔按 <span class="markBolck"></span> 图示规范填写。
										</p>
										<p>3.严格按照题号所示的答题区域内作答，超出答题区域书写的答案无效。</p>
										<p>4.保持卡面清洁、完整，严禁折叠，严禁在答题卡上做任何标记，严禁使用涂改液和修正带。</p>
									</div>
								</div>

							</div>
							<!--试题信息-->
							<div class="answerArea" id="answerArea">
								
							</div>
							<p class="answerFoot">五岳教育</p>
						</div>
						
					</div>
					<!--<div class="a3Sheet">
						<div class="localMark localMark1">
							
						</div>
						<div class="localMark localMark2">
							
						</div>
						<div class="localMark localMark3">
							
						</div>
						<div class="localMark localMark4">
							
						</div>
						<div class="a3SheetContent">
							
						</div>
					</div>-->
				</div>
			</div>
		</div>
		<!--新建弹窗-->
		<div class="dialog">
			<div class="answer-box">
				<p class="title">新建答题卡<span class="close-icon"></span></p>
				<div class="answer-main">
					<ul>
						<li class="children-s">
							<div><span>纸张：</span>
								<select name="" class="pageType">
									<option value="a3">A3</option>
									<option value="a4">A4</option>
									<option value="b4">B4</option>
									<option value="b5">B5</option>
								</select>
							</div>
							<div><span>页数：</span>
								<select name="" value="2" class="pageNum">
									<option value="1">1</option>
									<option value="2" selected="selected">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
									<option value="6">6</option>
								</select>
							</div>
							<div><span>栏数：</span>
								<select name="" class="pageSubfield">
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
								</select>
							</div>
						</li>
						<li class="children-s">
							<div><span>颜色：</span>
								<select name="" class="colorType">
									<option value="red">红色</option>
									<option value="balck">黑色</option>
								</select>
							</div>
							<div><span>考号样式：</span>
								<select name="" class="idStyle">
									<option value="1">条码</option>
									<option value="2">填涂</option>

								</select>
							</div>
							<div><span>考号长度：</span><input type="text" style="width:60px;" class="idLength"></div>
						</li>
						<li class="check-li children-s">
							<div>
								<label for="slideLine">侧边密封线</label>
								<input type="checkbox" name="" id="slideLine">
							</div>
							<div>
								<label for="handinput">手写分数框</label>
								<input type="checkbox" name="" id="handinput">
							</div>
						</li>
						<li class="children-one">
							<span>标题：     &nbsp;&nbsp;</span><input type="text" class="sheetTitleVal">
						</li>
						<li class="children-one">
							<span>副标题：</span><input type="text" class="subTitle">
						</li>
					</ul>
				</div>

				<div class="btn-box">
					<input class="save" type="button" value="保存" id="save">
					<input class="cancel" type="button" value="取消" class="cancel">
				</div>

			</div>
			
		</div>
	</body>
	<script src="static/ckeditor/ckeditor.js" type="text/javascript" charset="utf-8"></script>
	<script src="static/lib/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/sheet.js" type="text/javascript" charset="utf-8"></script>
	<script src="static/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script>

		var answerArea = document.getElementById("answerArea")
		answerArea.addEventListener("DOMNodeInserted", function () {
			var top = document.getElementsByClassName("mainMaxBox")[0]
			debugger
			console.log(top.offsetTop)
		})

	</script>
</html>